<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>once</title>
        <style type="text/css">
            .wrapper {
                border: 1px solid blue ;
                width: 400px ;
                height: 200px ;
            }
        </style>
    </head>
    <body>

        <h3>仅执行一次的事件处理程序</h3>

        <div class="wrapper"></div>

        <script type="text/javascript">
            const w = document.querySelector( '.wrapper' );
            const type = 'mouseover' ;
            const listener = {
                handleEvent(e){
                    console.log( e );
                }
            }
            const options = {
                // capture 用于指定是否在事件捕获阶段处理
                capture: true ,
                // once 用于指定事件监听器是否仅执行一次
                once: true 
            } ;
            w.addEventListener( type , listener , options );
        </script>
        
    </body>
</html>